<template>
  <div class="case">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">案例灵感</div>
    <div class="case-box">
      <div class="case-desc">
        <h2>创造灵感</h2>
        <p class="case-conent-e">Creating atmospheres</p>
        <p class="case-conent-desc">pego地板的设计灵感，源于包容万物的自然取材自最新的时尚潮流，经典的建筑作品以及我们每一天最真实的生活。</p>
        <p
          class="case-conent-desc"
        >每一放地板的设计，不管是强化复合地板，实木复合地板，或是乙烯基地板，都始于个英妙的灵感，一次令人惊艳的近，而成就于极致完英的选材，对每一个细节的精心捕捉、雕球与打唐，以及精湛的创新技术。</p>
      </div>
      <tab :line-width="2" active-color="#666" v-model="index">
        <tab-item class="vux-center" @on-item-click="getTabList(1)">
          <div class="tab-box">
            <img src="@/assets/img/case01.png" alt class="tab-icon" />
            <span class="tab-title">{{types[1]}}</span>
          </div>
        </tab-item>
        <tab-item class="vux-center" @on-item-click="getTabList(2)">
          <div class="tab-box">
            <img src="@/assets/img/case03.png" alt class="tab-icon" />
            <span class="tab-title">{{types[2]}}</span>
          </div>
        </tab-item>
        <tab-item class="vux-center" @on-item-click="getTabList(3)">
          <div class="tab-box">
            <img src="@/assets/img/case05.png" alt class="tab-icon" />
            <span class="tab-title">{{types[3]}}</span>
          </div>
        </tab-item>
        <tab-item class="vux-center" @on-item-click="getTabList(4)">
          <div class="tab-box">
            <img src="@/assets/img/case07.png" alt class="tab-icon" />
            <span class="tab-title">{{types[4]}}</span>
          </div>
        </tab-item>
        <tab-item class="vux-center" @on-item-click="getTabList(5)">
          <div class="tab-box">
            <img src="@/assets/img/case09.png" alt class="tab-icon" />
            <span class="tab-title">{{types[5]}}</span>
          </div>
        </tab-item>
        <tab-item class="vux-center" @on-item-click="getTabList(6)">
          <div class="tab-box">
            <img src="@/assets/img/case11.png" alt class="tab-icon" />
            <span class="tab-title">{{types[6]}}</span>
          </div>
        </tab-item>
        <tab-item class="vux-center" @on-item-click="getTabList(7)">
          <div class="tab-box">
            <img src="@/assets/img/case13.png" alt class="tab-icon" style="width: 0.3rem" />
            <span class="tab-title">{{types[7]}}</span>
          </div>
        </tab-item>
      </tab>
      <div class="case-list">
        <div class="case-list-li" v-for="(item, index) in caseArr" :key="index">
          <router-link :to="{path: 'case-details', query: {id: item.id}}">
            <img :src="item.img_url" alt class="case-li_img" />
          </router-link>
          <p class="case-li_title">{{ item.title }}</p>
        </div>
      </div>
    </div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
import { caseFun } from "@/api/index";
import { Tab, TabItem } from "vux";
import { mapGetters } from "vuex";
export default {
  components: {
    Tab,
    TabItem
  },
  data() {
    return {
      page: 1,
      type_id: 1,
      types: [],
      caseArr: [],
      index: 0
    };
  },
  computed: {
    ...mapGetters(["type"])
  },
  created() {
    this.case(0);
  },
  methods: {
    getType(type) {
      this.$store.dispatch("setType/getType", type);
    },
    case(type) {
      let obj = {
        limit: 6,
        type_id: this.type_id,
        page: this.page
      };
      caseFun(obj).then(res => {
        const { code, msg, data } = res;
        if (code == 200) {
          if (type == 0) {
            this.types = data.types;
            this.caseArr = data.rows;
          }
          this.caseArr = data.rows;
        }
      });
    },
    getTabList(index) {
      this.type_id = index;
      this.case(1);
    }
  }
};
</script>

<style lang="less" scoped>
.case-box {
  padding: 0.18rem 0.21rem 0.54rem;

  .tab-box {
    position: relative;

    .tab-icon {
      display: block;
      width: 0.39rem;
      position: absolute;
      left: 50%;
      top: 0;
      margin-left: -0.19rem;
    }

    .tab-title {
      position: relative;
      bottom: -5px;
    }
  }

  .case-desc {
    background: #f8f8f8;
    color: #6e6e6e;
    padding: 0.27rem 0.18rem;
    margin-bottom: 0.36rem;

    h2 {
      font-size: 0.36rem;
    }

    .case-conent-e {
      font-size: 0.21rem;
    }

    .case-conent-desc {
      margin-top: 0.27rem;
      font-size: 0.25rem;
      line-height: 24px;
    }
  }

  .case-list {
    margin-top: 0.18rem;
    min-height: 2.2rem;

    .case-list-li {
      margin-bottom: 0.36rem;

      a {
        display: block;
        font-size: 0;
      }

      .case-li_title {
        margin-top: 0.09rem;
      }

      .case-li_img {
        width: 100%;
        height: 3.79rem;
      }
    }
  }
}
</style>
